<template>
	<div class="container">
		<section>
			<div class="login-box">
				<!-- 登录框左侧 -->
				<div class="login-left">
					<a href="/" title="小鹿线" class="logo"><img src="../assets/logo02.png" alt="小鹿线" title="小鹿线" /></a>
					<div class="left-qrcode">
						<div id="qrcode" title="小鹿线">
							<canvas width="180" height="180" style="display: none;"></canvas>
							<img src="@/assets/img/下载.png" style="display: block;" />
						</div>
						<div class="qrcode-text">扫码登录</div>
					</div>
					<div class="quick-login">快捷登录</div>
					<div class="qq-wx-wb">
						<div class="wx-login">
							<a href="/oauth/login/WECHAT_OPEN" title="微信登录"><i class="fa fa-weixin"></i></a>
						</div>
						<div class="qq-login">
							<a href="/oauth/login/qq" title="QQ登录"><i class="fa fa-qq"></i></a>
						</div>
						<div class="weibo-login">
							<a href="/oauth/login/weibo" title="微博登录"><i class="fa fa-weibo"></i></a>
						</div>
					</div>
				</div>
				<!-- 登录框右侧 -->
				<div class="login-right">
					<div class="login-form">
						<ul class="nav nav-tabs">
							<li v-for="item in loginTxt" :key="item.id" class="nav-items" :class="current == item.id ? 'actives' : ''" @click="loginChange(item.id)">
								<a :class="current == item.id ? 'activess' : ''">{{ item.text }}</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane fade show active" v-if="current == 1">
								<!-- 账号登录 -->
								<div class="tab-main">
									<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
										<el-form-item class="login-user" prop="username">
											<el-icon><avatar /></el-icon>
											<el-input v-model="ruleForm.username" placeholder="请输入您的用户名" />
										</el-form-item>
										<el-form-item class="login-password" prop="password">
											<el-icon><lock /></el-icon>
											<el-input type="password" v-model="ruleForm.password" placeholder="请输入您的密码" />
										</el-form-item>
										<el-form-item class="login-submit"><el-button type="primary" @click="userBtn(ruleFormRef)">登录</el-button></el-form-item>
										<a class="forgetpwd">忘记密码？</a>
										<div class="login-text">
											登录即同意相关服务条款和隐私政策
											<a>《小鹿线用户服务协议》</a>
											<a>《小鹿线隐私政策》</a>
											若您没有账号，系统将为您自动创建账号并登录。
										</div>
									</el-form>
								</div>
							</div>
							<div class="tab-pane fade" v-else>
								<!-- 短信登录 -->
								<div class="tab-main">
									<el-form ref="ruleFormRefPhone" :model="ruleFormPhone" :rules="rulesPhone">
										<el-form-item class="login-user" prop="phone">
											<el-icon><avatar /></el-icon>
											<el-input v-model="ruleFormPhone.phone" placeholder="请输入您的手机号" />
										</el-form-item>

										<el-form-item class="login-Verification" prop="captcha">
											<el-input v-model="ruleFormPhone.captcha" placeholder="请输入您的验证码" />
											<el-button @click="sendCode" class="btn btn-primary sendcaptcha" type="primary">{{ captcha }}</el-button>
										</el-form-item>
										<div class="login-submit">
											<el-button @click="phoneBtn(ruleFormRefPhone)" class="btn btn-primary sendcaptcha" type="primary">登录</el-button>
										</div>
										<div class="login-text">
											登录即同意相关服务条款和隐私政策
											<a>《小鹿线用户服务协议》</a>
											<a>《小鹿线隐私政策》</a>
											若您没有账号，系统将为您自动创建账号并登录。
										</div>
									</el-form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }" @success="onSuccess" @error="error"></Verify>
</template>

<script setup>
//字体图标
import { Avatar, Lock, Iphone } from '@element-plus/icons-vue';

// api
import { loginByJson, sendCaptcha, loginByMobile, logout } from '../utils/api/login';
// 加解密:
import { Encrypt, Decrypt } from '../utils/aes.js';
// pinia
import { useUserStore } from '../stores/use.js';
const userStore = useUserStore();
// 路由
import { useRouter } from 'vue-router';
const router = useRouter();

//账号登录和短信登录切换
let current = ref(1);
//账号登录和短信登录
let loginTxt = ref([{ id: 1, text: '账号登录' }, { id: 2, text: '短信登录' }]);
const loginChange = id => {
	current.value = id;
};
//账号密码登录
const ruleFormRef = ref('');
let ruleForm = reactive({
	username: '',
	password: ''
});
let rules = reactive({
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 11, message: '请输入3-11位用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 3, max: 11, message: '请输入3-11位密码', trigger: 'blur' }]
});
//账号密码点击登录(测试帐号:test/admin123)
// console.log(Decrypt('08C7D7AD63097383EEDAF5E718F01902'));
const userBtn = formEl => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			loginByJson({
				// 加密登录:
				username: Encrypt(ruleForm.username),
				password: Encrypt(ruleForm.password)
			}).then(res => {
				if (res.meta.code != '10006') {
					ElMessage({
						showClose: true,
						message: res.meta.msg,
						type: 'error'
					});
					return;
				}
				userStore.setToken(res.data.accessToken);
				ElMessage({
					showClose: true,
					message: '登录成功',
					type: 'success'
				});
				console.log('登录成功Token:', userStore.token);
				// 跳转回上一页面
				router.go(-1);
			});
		} else {
			ElMessage({
				showClose: true,
				message: '请输入正确格式',
				type: 'warning'
			});
		}
	});
};

//手机号码登录
let captcha = ref('发送验证码');
const ruleFormRefPhone = ref('');
let ruleFormPhone = reactive({
	phone: '',
	captcha: ''
});
let rulesPhone = reactive({
	phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[13456789]\d{9}$/, message: '目前只支持中国大陆的手机号码', trigger: 'blur' }],
	captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
});

// 导入滑块验证码:
import Verify from '@/components/verifition/Verify.vue';
let verify = ref();
// 倒计时实现
let phoneTimer = null;
const InterCode = () => {
	let timer = 10;
	captcha.value = `重新发送10秒`;
	clearInterval(phoneTimer);
	phoneTimer = setInterval(() => {
		timer--;
		if (timer <= 0) {
			clearInterval(phoneTimer);
			captcha.value = '重新发送';
			timer = 10;
		} else {
			captcha.value = `重新发送${timer}秒`;
		}
	}, 1000);
};

// 滑动成功:
const onSuccess = () => {
	// 当滑块滑对了
	sendCaptcha({
		// 传入手机号
		mobile: ruleFormPhone.phone
	}).then(res => {
		if (res.meta.code == '200') {
			// 开始倒计时
			InterCode();
		}
	});
};

// 发送验证码
const sendCode = () => {
	//用户输入的手机号
	let phone = ruleFormPhone.phone;
	let regTel = /^1[13456789]\d{9}$/;
	// 如果格式不对:
	if (!regTel.test(phone)) {
		ElMessage({
			showClose: true,
			message: '请输入正确手机号',
			type: 'warning'
		});
		return;
	}
	// 如果格式正确,出现对应划块(使用：Verify):
	verify.value.show();
};
// 登录按钮
const phoneBtn = formEl => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			// 用户输入的手机号：
			let mobile = Encrypt(ruleFormPhone.phone);
			// 用户输入的验证码：
			let captcha = ruleFormPhone.captcha;
			loginByMobile({ mobile, captcha }).then(res => {
				// 登录成功
				if (res.meta.code != '10006') {
					ElMessage({
						showClose: true,
						message: res.meta.msg,
						type: 'error'
					});
					return;
				}
				userStore.setToken(res.data.accessToken);
				ElMessage({
					showClose: true,
					message: '登录成功',
					type: 'success'
				});
				// 跳转回上一页面
				router.go(-1);
			});
		} else {
			ElMessage({
				showClose: true,
				message: '请输入正确格式',
				type: 'warning'
			});
		}
	});
};
</script>

<style scoped>
.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: url(../assets/img/ybbg.jpg) no-repeat center;
}
section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	z-index: 10;
}
.login-box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 950px;
	height: 500px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	box-shadow: 0px 0px 5px #777;
}
.login-left {
	width: 475px;
	height: 500px;
	background: #388fff;
}
.login-right {
	position: relative;
	width: 475px;
	height: 500px;
	background: url(@/assets/img/ybbg.jpg) no-repeat center center;
}

.nav-tabs {
	border-bottom: none;
}
.login-form {
	padding: 10px 40px;
	width: 350px;
	height: 440px;
	background: #ffffff;
	box-shadow: 0 0 8px #cccccc;
	border-radius: 8px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.nav-tabs {
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.nav-tabs li {
	width: 40%;
	padding: 0px 0;
	font-size: 17px;
	font-weight: bold;
}
.nav-tabs li a {
	color: #333;
	display: block;
	height: 45px;
	line-height: 45px;
}
.actives {
	color: #388eff;
	border-bottom: 4px solid #388eff;
}
.activess {
	color: #388eff !important;
}
.nav-tabs li a:hover {
	text-decoration: none;
}
.tab-main {
	height: 360px;
	padding: 1px 0 0 0;
}
.login-user {
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #666;
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.login-user i {
	font-size: 18px;
	color: #666;
	margin-left: 5px;
}
.login-user input {
	width: calc(100% - 30px);
	height: 35px;
	outline: none;
	color: #666666;
	border: 0;
	padding: 0 5px;
}
.login-password {
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #666;
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.login-password i {
	font-size: 18px;
	color: #666;
	margin-left: 5px;
}
.login-password input {
	width: calc(100% - 30px);
	height: 35px;
	outline: none;
	color: #666666;
	border: 0;
	padding: 0 5px;
}
.login-Verification {
	width: 100%;
	height: 40px;
	margin-top: 30px;
	border-bottom: 1px solid #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.login-Verification .captcha {
	width: 130px;
	height: 35px;
	outline: none;
	color: #666666;
	border: none;
}
.login-Verification .sendcaptcha {
	padding: 5px 10px;
	font-size: 14px;
	border-radius: 20px;
}
.login-submit {
	width: 100%;
	height: 40px;
	margin-top: 30px;
	display: flex;
	align-items: center;
}
.login-submit button {
	width: 100%;
	height: 35px;
	outline: none;
	border: none;
	letter-spacing: 5px;
	border-radius: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}
.forgetpwd {
	float: right;
	color: #888;
}
.login-text {
	width: 100%;
	margin-top: 50px;
	color: #666;
	text-align: justify;
}
.login-left {
	padding: 20px;
}
.login-left .logo img {
	width: 120px;
}
.left-qrcode {
	width: 200px;
	margin: 30px auto 0 auto;
}
.left-qrcode #qrcode {
	width: 200px;
	height: 200px;
	padding: 10px;
	background: #ffffff;
}
.left-qrcode #qrcode img {
	width: 100% !important;
	height: 100% !important;
}
.login-left .qrcode-text {
	text-align: center;
	color: white;
	line-height: 35px;
	margin-top: 10px;
}
.quick-login {
	text-align: center;
	margin: 20px 0;
	color: #dddddd;
	position: relative;
}
.quick-login:before {
	content: '';
	width: 80px;
	height: 1px;
	background: #dddddd;
	position: absolute;
	left: 100px;
	top: 50%;
}
.quick-login:after {
	content: '';
	width: 80px;
	height: 1px;
	background: #dddddd;
	position: absolute;
	right: 100px;
	top: 50%;
}
.qq-wx-wb {
	width: 180px;
	height: 55px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
.qq-wx-wb .qq-login {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	font-size: 18px;
	text-align: center;
	line-height: 30px;
	background: #e5ffe1;
}
.qq-wx-wb .qq-login a {
	color: #368afe;
}
.qq-wx-wb .wx-login {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	font-size: 18px;
	text-align: center;
	line-height: 30px;
	background: #e5ffe1;
}
.qq-wx-wb .wx-login a {
	color: #09bb07;
}
.qq-wx-wb .weibo-login {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	font-size: 18px;
	text-align: center;
	line-height: 30px;
	background: #e5ffe1;
}
.qq-wx-wb .weibo-login a {
	color: #d81e06;
}
:deep .el-form-item__content {
	flex-wrap: nowrap;
}
:deep .el-input__wrapper {
	border: none !important;
	box-shadow: none !important;
}
:deep .el-input__inner {
	border: none !important;
	box-shadow: none !important;
}
:deep .el-select {
	--el-select-input-focus-border-color: transparent;
}
:deep .el-form-item__error {
	top: 120%;
}
</style>
